import { reactive, Ref, ref, watch } from "vue";

let httprepuest: (params: any) => Promise<any>;

export default function useTable<T>({ api, paramsval }: useTableParam<T>) {
    // 用户例表
    let dataList: Ref<list> = ref([]);
    let data: IDate = reactive({
        // 当前页数
        pageNum: 1,
        // 一页多少个
        pageSize: 10,
        // 总多少个
        total: 0,
    });

    // 获取用户名或姓名分页获取用户列表
    function detchData(
        api: (params: any) => Promise<any>,
        paramsval: ImaParams
    ) {
        api({
            //第几页
            pageNum: data.pageNum,
            //页面大小
            pageSize: data.pageSize,
            ...paramsval,
        }).then((res) => {
            data.pageNum = res.data.pageNum;
            data.pageSize = res.data.pageSize;
            data.total = res.data.total;
            dataList.value = res.data.list;
        });
    }

    // 页面一页多少个 发生改变
    const handleSizeChange = () => {
        detchData(httprepuest, paramsval);
    };
    //  当前页数 发生改变
    const handleCurrentChange = () => {
        detchData(httprepuest, paramsval);
    };
    // 查询用户
    const queryUser = (val:any) => {
        detchData(httprepuest, {keyword:val});
    };
    httprepuest = api;
    detchData(api, paramsval);
    return {
        data,
        dataList,
        queryUser,
        handleSizeChange,
        handleCurrentChange,
    };
}
type list = {
    id: number;
    username: string;
    nickName: string;
    email: string;
    createTime: string;
    loginTime: string;
    status: number;
    note: string;
    icon: string;
}[];
type IDate = {
    // list:list;
    pageNum: number;
    pageSize: number;
    total: number;
};

interface useTableParam<T> {
    api: (params: any) => Promise<T>;
    paramsval: ImaParams;
}
interface ImaParams {
    [x: string]: number | string;
}
